<template>
    <div class="order_r">
      <w-breadcrumb style="font-size: 14px;margin-left:5px" separator="/">
        <w-breadcrumb-item>提交托运订单</w-breadcrumb-item>
      </w-breadcrumb>
      <div class="order_person">
        <div class="order_send">
          <p class="send_det">发件人信息</p>
          <span>地址：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          ><input
            disabled="disabled"
            class="order_inp"
            type="text"
            v-model="sendPeople.address"
          /><br />
          <span>姓名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          ><input
            disabled="disabled"
            class="order_inp"
            type="text"
            v-model="sendPeople.name"
          /><br />
          <span>联系方式：</span
          ><input
            disabled="disabled"
            class="order_inp"
            type="text"
            v-model="sendPeople.phone"
          /><br />
          <i
            class="iconfont icon-gantanhao-sanjiaokuang"
            style="font-size: 10px; margin-right: 5px; color: red"
            >请点击按钮导入地址</i
          >
          <w-button @click="drawerShow1" class="order_btn"
            >从地址簿导入</w-button
          >
          <w-drawer
            title="地址簿"
            :visible.sync="drawer1"
            direction="rtl"
            size="35%"
            style="font-size: 18px"
          >
            <w-table
              class="address_table"
              :data="addressTable"
              @row-click="selectAddress_s"
              style="padding-left: 10px"
            >
              <w-table-column prop="address" label="地址" width="250" :show-overflow-tooltip="true">
              </w-table-column>
              <w-table-column prop="name" label="姓名" width="110">
              </w-table-column>
              <w-table-column prop="phone" label="联系电话" width="130">
              </w-table-column>
            </w-table>
            <w-button style="margin-bottom: 10px" @click="addTableItem = true"
              >新增地址</w-button
            >
            <w-dialog
              :modal="false"
              title="新增地址"
              :visible.sync="addTableItem"
              width="550px"
            >
              <AddressInfo ref="bb" class="addressChange"></AddressInfo>
              <div slot="footer" class="dialog-footer">
                <w-button type="primary" @click="submitAddTable">保存</w-button>
              </div>
            </w-dialog>
          </w-drawer>
        </div>
        <div class="order_receive">
          <p class="send_det">收件人信息</p>
          <span>地址：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          ><input
            disabled="disabled"
            class="order_inp"
            type="text"
            v-model="receivePeople.address"
          /><br />
          <span>姓名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
          ><input
            disabled="disabled"
            class="order_inp"
            type="text"
            v-model="receivePeople.name"
          /><br />
          <span>联系方式：</span
          ><input
            disabled="disabled"
            class="order_inp"
            type="text"
            v-model="receivePeople.phone"
          /><br />
          <i
            class="iconfont icon-gantanhao-sanjiaokuang"
            style="font-size: 10px; margin-right: 5px; color: red"
            >请点击按钮导入地址</i
          >
          <w-button @click="drawerShow2" class="order_btn"
            >从地址簿导入</w-button
          >
          <w-drawer
            title="地址簿"
            :visible.sync="drawer2"
            direction="rtl"
            size="35%"
            style="font-size: 18px"
          >
            <w-table
              class="address_table"
              :data="addressTable"
              @row-click="selectAddress_r"
              style="padding-left:10px"
            >
              <w-table-column prop="address" label="地址" width="250" :show-overflow-tooltip="true">
              </w-table-column>
              <w-table-column prop="name" label="姓名" width="110">
              </w-table-column>
              <w-table-column prop="phone" label="联系电话" width="130">
              </w-table-column>
            </w-table>
            <w-button @click="addTableItem = true">新增地址</w-button>
            <w-dialog
              :modal="false"
              title="新增地址"
              :visible.sync="addTableItem"
              width="550px"
            >
              <AddressInfo ref="bb" class="addressChange"></AddressInfo>
              <div slot="footer" class="dialog-footer">
                <w-button type="primary" @click="submitAddTable">保存</w-button>
              </div>
            </w-dialog>
          </w-drawer>
        </div>
      </div>
      <div class="order_goods">
        <p class="send_goods_det">货物信息</p>
        <span>名称：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
        ><input
          spellcheck="false"
          class="order_inp"
          type="text"
          v-model="goodsDetail.type"
        /><br />
        <span>预估重量：</span
        ><input
          spellcheck="false"
          class="order_inp"
          type="text"
          v-model="goodsDetail.weight"
        /><span class="kilo">kg</span><br />
        <span>体积：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
        ><input class="tj_f" type="text" v-model="goodsDetail.length" />*<input
          class="tj_t"
          type="text"
          v-model="goodsDetail.width"
        />*<input class="tj_s" type="text" v-model="goodsDetail.height" /><span class="cm">m³</span><br />
        <div class="order_goods_text">
          <span>订单备注：</span
          ><textarea class="list_text" v-model="goodsDetail.remarks"></textarea>
        </div>
      </div>
      <div @click="submit" class="submit">提交订单</div>

      <w-dialog
        style="width: 750px; margin: 100px auto; text-align: center"
        :visible.sync="addFormVisible"
      >
        <div class="freigth">此订单运费为：</div>
        <span style="color: red; font-size: 16px">{{ value }} 元</span>
        <div slot="footer" class="dialog-footer">
          <w-button type="primary" @click="submitOrder">确认</w-button>
          <w-button type="primary" @click="addFormVisible = false"
            >取消</w-button
          >
        </div>
      </w-dialog>
    </div>
</template>

<script>
import AddressInfo from "../components/AddressInfo";
export default {
  name: "Order",
  components: { AddressInfo },
  data() {
    return {
      addFormVisible: false,
      showPop_r: false,
      sendPeople: {
        id: "",
        address: "",
        name: "",
        phone: "",
      },
      drawer1: false,
      drawer2: false,
      receivePeople: {
        id: "",
        address: "",
        name: "",
        phone: "",
      },
      addressTable: [],
      goodsDetail: {
        type: "",
        weight: "",
        height: "",
        width: "",
        length: "",
        remarks: "",
      },
      value: "",
      num: 0,
      addTableItem: false,
    };
  },
  methods: {
    selectAddress_r(row) {
      this.receivePeople.address = row.address;
      this.receivePeople.id = row.id;
      this.receivePeople.name = row.name;
      this.receivePeople.phone = row.phone;
      this.drawer2 = false;
    },
    selectAddress_s(row) {
      this.sendPeople.id = row.id;
      this.sendPeople.address = row.address;
      this.sendPeople.name = row.name;
      this.sendPeople.phone = row.phone;
      this.drawer1 = false;
    },
    submit() {
      if (
        this.sendPeople.id != "" &&
        this.receivePeople.id != "" &&
        this.goodsDetail.type != "" &&
        this.goodsDetail.weight != "" &&
        this.goodsDetail.length != "" &&
        this.goodsDetail.width != "" &&
        this.goodsDetail.height != ""
      ) {
        this.addFormVisible = true;
        if (this.num === 0) {
          this.getRandomInt(12, 20);
          this.num++;
        }
      } else {
        this.$alert("请填写完整", "提示", {
          confirmButtonText: "确定",
        });
      }
    },
    submitOrder() {
      const uid = localStorage.getItem("uid");
      this.$axios({
        method: "POST",
        url: "http://1.15.170.222:88/api/order/user/submitOrder",
        data: {
          uid: uid,
          sendAddressId: this.sendPeople.id,
          sendName: this.sendPeople.name,
          sendPhone:this.sendPeople.phone,
          receivePhone:this.receivePeople.phone,
          receiveName: this.receivePeople.name,
          receiveAddressId: this.receivePeople.id,
          type: this.goodsDetail.type,
          weight: this.goodsDetail.weight,
          length: this.goodsDetail.length,
          width: this.goodsDetail.width,
          height: this.goodsDetail.height,
          value: this.value,
        },
      }).then((response) => {
        console.log(response);
        this.$alert("提交成功", "提示", {
          confirmButtonText: "确定",
        });
      });
      this.addFormVisible = false;
      this.sendPeople = {};
      this.receivePeople = {};
      this.goodsDetail = {};
    },
    getRandomInt(min, max) {
      this.value = Math.floor(Math.random() * (max - min + 1)) + min;
    },
    drawerShow1() {
      this.drawer1 = true;
      const uid = localStorage.getItem("uid");
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/manage/address/user/" + uid,
        data: {
          uid: uid,
        },
      }).then((response) => {
        console.log(response);
        this.addressTable = response.data.data;
      });
    },
    drawerShow2() {
      this.drawer2 = true;
      const uid = localStorage.getItem("uid");
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/manage/address/user/" + uid,
        data: {
          uid: uid,
        },
      }).then((response) => {
        console.log(response);
        this.addressTable = response.data.data;
      });
    },
    async submitAddTable() {
      const uid = localStorage.getItem("uid");
      await this.$axios({
        method: "POST",
        url: "http://1.15.170.222:88/api/manage/address/insert",
        data: {
          uid: uid,
          address: this.$refs.bb.acity + this.$refs.bb.address,
          name: this.$refs.bb.name,
          phone: this.$refs.bb.phone,
        },
      }).then((response) => {
        console.log(response);
      });
      this.$axios({
        method: "GET",
        url: "http://1.15.170.222:88/api/manage/address/user/" + uid,
      }).then((response) => {
        console.log(response);
        this.addressTable = response.data.data;
      });
      this.addTableItem = false;
    },
  },
};
</script>

<style>
.order_r {
  padding-top: 40px;
  padding-left: 82px;
  display: flex;
  flex-direction: column;
  width: 960px;
  height: 680px;
}
.order_person {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  font-size: 13px;
  flex-wrap: wrap;
}
.send_det {
  font-size: 16px;
  margin-bottom: 20px;
  text-align: center;
}
.send_goods_det {
  font-size: 16px;
  margin: 10px 75px 20px;
}
.order_send {
  flex: 50%;
  text-align: center;
}
.order_receive {
  flex: 50%;
  text-align: center;
}
.order_inp {
  text-indent: 2px;
  outline: none;
  height: 22px;
  margin-bottom: 10px;
}
.kilo {
  margin-left: 3px;
}
.order_btn {
  background-color: #fff;
  border: 1px solid #c0c0c0;
  line-height: 0;
  margin-top: 20px;
  border-radius: 3px;
  font-size: 11px;
}
.order_goods {
  margin: 30px auto;
  height: 220px;
  font-size: 13px;
}
.tj_f,
.tj_t,
.tj_s {
  outline: none;
  margin-right: 5px;
  width: 42px;
}
.tj_t,
.tj_s {
  margin-left: 6px;
}
.list_text_title {
  margin-top: 20px;
}
.order_goods_text {
  margin-top: 10px;
}
.list_text {
  padding: 2px;
  outline: none;
  resize: none;
  vertical-align: text-top;
  width: 160px;
  height: 60px;
}
.freight {
  text-align: center;
}
.freight span {
  color: red;
}
.submit {
  margin: 10px auto;
  border-radius: 8px;
  width: 120px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 13px;
  background-color: #00bfff;
  color: #fff;
  cursor: pointer;
}
.addressChange {
  margin-left: 100px;
  margin-top: -6px;
  height: 180px;
}
.freigth {
  display: inline-block;
  font-size: 18px;
}
.address_table {
  width: 660px;
  
}
</style>
